<template>
    <div class="custom-cell">
        <div class="cell-wapper">
            <div class="cell-left">
                <img class="head-img" :src="headimgurl"/>
            </div>
            <div class="cell-right">
                <div class="right-up">
                    <table>
                        <tr>
                            <td><span class="span-name">{{username}}</span></td>
                            <td><span class="relation">于{{conndate|formateTime}}&nbsp;建立客户关系</span></td>
                        </tr>
                    </table>
                </div>
                <div class="right-down" @click="callTelephone">
                    <span class="span-phone">手机号：{{phone}}</span>
                    <span v-if="this.phone&&this.phone!=''&&this.phone!='暂无'" class="icon-phone iconfont"></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "custom-cell",
  props: {
    headimgurl: {
      type: String,
      default:
        "http://wx.qlogo.cn/mmhead/Q3auHgzwzM4gukibCod4nFgBCKNxtZoTXMH375V1tBZ0AGibbruhMic0A/0"
    },
    conndate: {
      type: String,
      default: ""
    },
    phone: {
      type: String,
      default: "暂无"
    },
    username: {
      type: String,
      default: ""
    }
  },
  computed: {},
  methods: {
    callTelephone() {
      if (!this.phone || this.phone == "" || this.phone == "暂无") return;
      window.location.href = "tel:" + this.phone;
    }
  },
  filters: {
    formateTime: function(val) {
      var date = new Date(val * 1000);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      var second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d;
    }
  },
  components: {},
  created() {
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.custom-cell {
    width: 100%;
    height: .82rem;

    .cell-wapper {
        // position: relative;
        display: flex;
        align-items: center;
        height: 100%;

        .cell-left {
            flex 0 1 .76rem;
            text-align: center;

            img {
                width: .6rem;
                height: .6rem;
                border-radius: 50%;
            }
        }

        .cell-right {
            flex 1;

            .right-up {
                margin-bottom: .05rem;
                position: relative;
                td {
                    vertical-align: middle;
                    .span-name {
                        color #595656;
                        display inline-block;
                        font-weight: 600;
                        font-size: .15rem;
                        padding 0.03rem 0.03rem 0 0;
                        max-width 1.2rem;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                    }

                    .relation {
                        font-size: .12rem;
                        line-height: .12rem;
                        color: #c1c1c1;
                        display: block;
                        border-left: 1px solid #c1c1c1;
                        margin-left 0.05rem;
                        padding-left: 0.03rem;
                    }
                }
            }

            .right-down {
                color: #595656;

                .span-phone {
                    font-size: .14rem;
                }

                .icon-phone {
                    font-size: .16rem;
                    font-weight: 300;
                    left: 0.03rem;
                    top: 0.01rem;
                    position: relative;
                }
            }
        }
    }
}
</style>